<html>
<head>
    <title>AjaxProject</title>
    <meta charset="utf-8">
    <style>
        .username.ng-valid {
            background-color: lightgreen;
        }

        .username.ng-dirty.ng-invalid-required {
            background-color: red;
        }

        .username.ng-dirty.ng-invalid-minlength {
            background-color: yellow;
        }

        .email.ng-valid {
            background-color: lightgreen;
        }

        .email.ng-dirty.ng-invalid-required {
            background-color: red;
        }

        .email.ng-dirty.ng-invalid-email {
            background-color: yellow;
        }

    </style>
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link href="css/app.css" rel="stylesheet"/>

    <script>
        function show() {
            $("#persons>tbody").empty();//每次展示完要清空一下，
            $.ajax({
                url: "/person",
                data: "action=show",
                dataType: "text json",//传送的是文本内容，是json格式的
                type: "get",
                statusCode: {
                    200: function (data) {
                        var i = 1;//i要在遍历外面加，不然就等于每次都重新赋值为1
                        $(data).each(function (index) {//这里记住写上回调函数的索引号**
                            // alert(data[index].username);//打印每笔数据
                            var str = "<tr>" +
                                "<td>" +
                                //要加三组td 因为模板中删除编辑在最后一列那块
                                (i++) +
                                "</td>" +
                                "<td>" +
                                (data[index].username) +
                                "</td>" +
                                "<td>" +
                                (data[index].password) +
                                "</td>" +
                                "<td>" +
                                "<input type='button' class='btn btn-success ' onclick='update(" + data[index].id + ")'  value='编辑'>" +
                                "<input type='button' class='btn btn-danger' onclick='Delete(" + data[index].id + ")' value='删除' >" +
                                "</td>" +
                                "</tr>";
                            $("#persons>tbody").append(str);
                        })
                    }
                }
            });
        }

        function update(id) {
            $.ajax({
                url: "/person",
                data: "action=update&id=" + id,
                type: "get",
                dataType: "text json",//传的是对象 所以要用json
                statusCode: {
                    200: function (data) {//data就是往后端传的对象
                        $("#userName").val(data.username);
                        $("#password").val(data.password);
                        $("#uid").val(data.id);//即把当前要修改的这个数据的id同样的传给后端，但是不显现出来
                    }
                }
            });
        }

        function Delete(id) {//通过主键来进行删除
            //alert(id);
            $.ajax({
                url: "/person",
                data: "action=delete&id=" + id,//删除用户，主键通过前端传到后端去
                // ***更新id前端到后端
                type: "get",
                dataType: "text",//不用写json 不是大批量数据
                statusCode: {
                    200: function () {
                        // alert(data);
                        show();//删除成功后进行展示结果
                    }
                }
            });
        }

        $(function () {
            show();
            //增加and修改数据操作
            $("#add").click(function () {
                var username = $("#userName").val();//取出你输入进文本框里的值
                var pwd = $("#password").val();
                var id=$("#uid").val();
                //一定要用val()才可以 不能用value**
                // alert(username+" "+pwd);
                var uerror = $("#uerror");//判断用户名空错误
                var perror = $("#perror");//判断密码空错误
                if (username == "") {
                    uerror.html("用户名不能为空！");//往span里面加文字
                    //做一个输入错误的输出操作
                    return;
                } else {
                    //有数据
                    uerror.html("")
                }
                if (pwd == "") {
                    perror.html("密码不能为空！");//做一个输入错误的输出操作
                } else {
                    //有数据
                    perror.html("")
                }
                //开始增加数据到后端
                $.ajax({
                    url: "/person",
                    data: "action=add&username=" + username + "&password=" + pwd + "&id=" + id,//id可能为空 如果是单纯增加新数据的话就为空，修改则不为空
                    // ***更新id前端到后端
                    type: "get",
                    dataType: "text",//这个是后端往前端穿的东西
                    statusCode: {
                        200: function (data) {
                            // alert(data);
                            show();//增加成功后进行展示结果
                        }
                    }
                })
            });
            // $("#persons>tbody")
        });
        /*
        <tr>
      <td>

      </td>
      <td>

      </td>
      <td>

      </td>
      <td>
             <a href=""  class="btn btn-success custom-width">编辑</a>
                <a href=""  class="btn btn-danger custom-width">删除</a>
      </td>
    </tr>

         */
    </script>
</head>
<body>
<div class="generic-container">
    <div class="panel panel-default">
        <div class="panel-heading"><span class="lead">注册用户:</span></div>
        <div class="formcontainer">

            <!--<form name="myForm" class="form-horizontal" id="form1"-->
            <!--action=""-->
            <!--method="post">-->


            <div class="row">
                <div class="form-group col-md-12">
                    <label class="col-md-2 control-lable">姓名</label>
                    <div class="col-md-7">
                        <!--uid为隐藏的字段 即隐藏的id-->
                        <input type="hidden" name="id" id="uid"
                               value=""/>
                        <input type="text" name="userName" id="userName"
                               value=""
                               class="username form-control input-sm"
                               placeholder="输入你的姓名"/>
                        <div class="has-error">
                            <span id="uerror"></span>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="form-group col-md-12">
                    <label class="col-md-2 control-lable">密码</label>
                    <div class="col-md-7">
                        <input type="text" name="password" id="password"
                               value=""
                               class="password form-control input-sm"
                               placeholder="输入你的密码"
                        />
                        <div class="has-error">
                            <span id="perror"></span>

                        </div>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="form-actions floatRight">
                    <input type="button" id="add"
                           value="提交"
                           class="btn btn-primary btn-sm"
                    >
                    <button type="button" id="rst"
                            class="btn btn-warning btn-sm">复原
                    </button>
                </div>
            </div>
            <!--</form> form表单是同步 要用异步写-->
        </div>
    </div>
    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading"><span class="lead">已注册的用户列表:</span></div>
        <div class="tablecontainer">
            <table class="table table-hover" id="persons">
                <thead>
                <tr>
                    <th>ID.</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th width="20%">操作</th>
                </tr>
                </thead>
                <tbody>


                </tbody>
            </table>
        </div>
    </div>
</div>


</body>
</html>